<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
      let a = 1
      const b = 2
      const div = (
        <div>
          {a}, {b}
          <br />
          {1}
          {'123'}
          {/*这是jsx注释*/}
          {/*不要直接渲染布尔值,不会渲染到页面上,也不会报错*/}
          {false}
          {/*注意: 不要直接渲染函数,会报警告*/}
          {/*{function () {}}*/}
          <button
            onClick={function () {
              alert(123)
            }}
          >
            按钮
          </button>
          {(function () {
            return 'xxx'
          })()}
          {/*注意: 渲染数组时,会把数组中的每一个元素,当做子节点渲染*/}
          {['a', 'b', 'c']}
          {/*注意: 不能直接渲染普通对象*/}
          {/*{{ name: 'xxx' }}*/}
          <h1 style={{ color: 'red' }}>123123123123</h1>
          {true ? 'yyy' : 'zzz'}
        </div>
      )

      ReactDOM.render(div, document.getElementById('root'))
    </script>
  </body>
</html>
